<template>
  <van-nav-bar
    class="vanNavBar"
    :safe-area-inset-top="true"
    :title="props.title"
    :left-arrow="isLeftArrow"
    @click-left="onClickLeft"
    @click-right="emits('clickRight')"
  >
    <template #right v-if="props.right_text">
      <div class="_nav_right" :class="props.right_text">
        {{ props.right_text === 'icon user' ? '' : props.right_text }}
      </div>
    </template>
  </van-nav-bar>
</template>

<script setup>
import { useRouter } from 'vue-router'

const props = defineProps({
  title: {
    type: String,
  },
  isLeftArrow: {
    type: Boolean,
    default: true,
  },
  right_text: {
    type: String,
  },
})
const $router = useRouter()

/** 点击左侧返回 */
const onClickLeft = () => {
  $router.back()
}

const emits = defineEmits(['clickRight', 'clickLeft'])
</script>

<style lang="scss" scoped>
.vanNavBar {
  background: linear-gradient(to right, #70e2c1, #11c58f);
  :deep(.van-icon) {
    color: #fff;
  }
  :deep(.van-nav-bar__title) {
    font-weight: 400;
    font-size: 18px;
    color: #fff;
  }
  ._nav_right {
    font-size: 12px;
    color: #fff;
  }
  .user {
    font-size: 22px;
  }
}
</style>
